<template>
<div @click.left="closeMenu" @contextmenu.prevent="openMenu">
<!--左侧菜单-->
  <div class="nav">
    <a href="javascript:;" class="logo"><i class="el-icon-upload"></i></a>
      <ul>
		    <template v-for="item in menus">
			    <li v-if="item.children&&item.children.length>0" class="nav-item" :class="$route.meta.pid==item.id?'active':''">
              <a href="javascript:;"><span class="fir-nav"><i :class="'iconfont '+item.icon"></i>{{item.name}}</span></a>
              <ul>
                  <li v-for="child in item.children" :key="child.id"><router-link :to="child.route">{{child.name}}</router-link></li>
              </ul>
          </li>
  			  <li v-else class="nav-item" :class="$route.meta.id==item.id?'active':''">
  				    <router-link :to="item.route"><span class="fir-nav"><i :class="'iconfont '+item.icon"></i>{{item.name}}</span></router-link>
  			  </li>
			  </template>
      </ul>
  </div>
<!--右侧-->
    <div class="main">
	    <div class="top">
		    <span style="display:block;line-height:55px;">后台管理系统</span>
			  <el-menu class="el-menu-demo" mode="horizontal" router>
				  <el-menu-item index="2"><i class="el-icon-phone-outline"></i>联系客服</el-menu-item>
				  <el-menu-item index="5"><i class="el-icon-bell"></i><el-badge is-dot class="item" style="height:30px;line-height:30px">消息</el-badge></el-menu-item>
				  <el-submenu index="3">
    					<template slot="title"><img src="../assets/logo.jpg" class="avatar" />{{admin.name}}</template>
    					<el-menu-item index="3-1">个人资料</el-menu-item>
    					<li class="el-menu-item" @click.stop="logout">安全退出</li>
				  </el-submenu>
			  </el-menu>
		  </div>
	    <div class="navtab">
		    <div ref="tag" style="display:inline-block">
  		    <router-link tag="span"  :to="tag.to" replace class="el-tag el-tag--medium" v-for="(tag,index) in tags" :key="index" >{{tag.name}}
  			    <i v-if="tag.closable===undefined?true:false" class="el-tag__close el-icon-close" @click.stop="closeTag(index)" ></i>
  			  </router-link>
			  </div>
		  </div>
	    <transition :name="slidemode"><router-view></router-view></transition>
	  </div>
    <transition name="fade">
      	<ul class="el-dropdown-menu contextmenu" v-if="contextmenu.status.show" :style="contextmenu.status.style">
            <li v-for="item in contextmenu.list" v-if="contextmenu.list.length>0" class="el-dropdown-menu__item" @click="menuAction(item.method)"><i :class="'iconfont '+(item.icon?item.icon:'icon-expand')"></i>{{item.name}}</li>
        		<li class="el-dropdown-menu__item" @click="menuAction('this.fullScreen()')"><i class="iconfont icon-quanping"></i>{{isFull?'退出全屏':'全屏浏览'}}</li>
            <li class="el-dropdown-menu__item el-dropdown-menu__item--divided" @click="menuAction('this.logout()')"><i class="iconfont icon-tuichu"></i>安全退出</li>
      	</ul>
    </transition>
</div>
</template>
<script>
import {getTree,fullScreen} from '../lib/function'
import * as api from '../api/index'
  export default {
    data() {
      return {
    		  slidemode:'slideright',
          isFull:false,
      		menus:[],//左侧导航菜单
          admin:{},//管理员信息
          contextmenu:{//右键菜单
            status:{show:false,style:''},
            tmp:[],
            list:[]
          },
      		tags: [{name: '首页',to:'/',closable:false}]
      };
    },
	 watch: {'$route': 'addTag'},
   methods: {
        menuAction(e){
           if(e.indexOf('this')!=-1) eval(e);
           else{
             let p=[];
             if(e.indexOf('=')!=-1){
                 p=e.split('=');
                 e=p[0];
                 p=p[1].split(',');
             }
             let execute=this.$children[this.$children.length-1][e];
             if(typeof execute=="function") execute(...p);
           }
         },
    	  addTag(r){//添加标签
    		  let exits=false;
    		  this.tags.forEach(function(item){
    			  if(item.to==r.path) exits=true;
    		  });
    		  if(!exits) {
      			this.slidemode='slideright';
      			this.tags.push({name:r.meta.name,to:r.path});
    		  }else{
    			  this.slidemode='slideleft';
    		  }
    	  },
    	  closeTag(i) {//关闭标签
            let tag=this.tags[i];
            this.tags.splice(i,1);
            if(tag.to==this.$route.path){
              this.slidemode='slideleft';
              this.$router.replace(this.tags[this.tags.length-1].to);
            }
          },
        addMenu(arr){
          arr&&this.contextmenu.tmp.push(...arr);
        },
    	  openMenu(e,arr){//打开右键菜单
            this.contextmenu.list=[];
            if(this.contextmenu.tmp.length>0){
              this.contextmenu.list.push(...this.contextmenu.tmp)
              this.contextmenu.tmp=[];
            }
            arr&&this.contextmenu.list.push(...arr);
            let style='top:'+(e.clientY-5)+'px;left:'+(e.clientX-2)+'px;';
            if(e.clientY+105>window.innerHeight) style+='bottom:0;top:auto;left:'+(e.clientX-2)+'px;';
            if(e.clientX+120>window.innerWidth) style+='right:0;left:auto;';
            this.contextmenu.status={show:true,style}
    	  },
    	  closeMenu(e){//关闭右键菜单
      		this.contextmenu.status={show:false}
    	  },
        fullScreen(){//全屏
            fullScreen(this.isFull=!this.isFull);
        },
    	  logout(){//退出系统
    			this.$confirm('确定退出系统?', '提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'
    				}).then(() => {
    					api.logout({},res=>{
    						  sessionStorage.removeItem('user');
    						  sessionStorage.removeItem('menu');
    						  location.reload();
    					 });
    				}).catch(()=>{});
    	  }
    },
	created: function () {
        this.admin=JSON.parse(sessionStorage.getItem('user'));
    		this.addTag(this.$route);
    		if(this.menus.length<=0){
          this.menus.push({id:0,name:'首页',route:'/',view:'',icon:'icon-shouye-copy'});
    			let menu=sessionStorage.getItem('menu');
    			if(menu) this.menus.push(...getTree(eval(menu),0));
    			else {
    				sessionStorage.removeItem('user');
    				this.$router.replace('/login');
    			}
    		}

    		document.onkeydown=e=>{
    			let key=window.event.keyCode;
    			if(key==122) {
    				if(this.isFull) this.isFull=false;
    				else this.isFull=true;
    			}
    		};
        this.uploadUrl=api.url.upload;
        this.token=sessionStorage.getItem('token');
    },
	beforeRouteEnter (to, from, next) {
	    if(!sessionStorage.getItem('user')) next('/login');
	    else {
			     next();
		    }
    }
  }
</script>
